import React from 'react';
import { connect } from 'react-redux';
import { setFilter } from './../actions';

class Link extends React.Component {

    constructor(props) {
        super(props);
        console.error("constructor");
        console.error(props);
        this.choose = props.choose.bind(this);
        this.state = {
            name: props.children
        }
    }

    render() {
        if (this.state.active) {
            return <b>{ this.state.name }</b>
        } else {
            return (
                <div>
                    <button onClick={ this.choose }>{ this.state.name }</button>
                </div>
            )    
        }
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        active: state.filter === ownProps.state
    }
}

const mapDispatchToProps = (dispatch, ownProps) => ({
    choose: () => {
        dispatch(setFilter(ownProps.filter));
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Link);